requirejs.config({
	paths : {
		jquery : "jquery-1.11.3",
		pagination:"jquery.pagination",
		cookies : "cookie"
	}
})
requirejs(["jquery","cookies"],function($,cookie){
	requirejs(["pagination"],function(){
//		$("body").css("background","red")
//		页面加载  显示第一页
//		window.onload = function(){
		var index = 1;
		var deff = $.ajax({
			type:"get",
			url:"../json/list.json"
		});
		deff.done(function(arr){		
			total = Math.ceil(arr.length/24);//总页数
			showData(index,arr);
		})
			$('.M-box').pagination({
			    pageCount: 10,
			    callback:function(api){
			        var data = {
			            page: api.getCurrent(), //返回当前页码
			            name: 'mss',
			            say: 'oh'
			        };
			       var index = data.page;//页码
			        $.getJSON('../json/list.json',function(arr){
			        	showData(index,arr);
			        	
			        });
			}
		})
	
//	}
})
})

requirejs(["jquery","cookies"],function($,cookie){
	$(function(){
		
		$("#public_top").load("header.html ")
		$("#bottomBox").load("footer.html")
		
		$(".Catalog>ul>h3").click(function(){
			var index = $(this).index();
			$(this).siblings()
				   .toggle(300)
		})
		
		$.getJSON("../json/ranking.json",function(data){
			var str = "";
			$.each(data,function(index,value){
				str +=`<li>
		                    <a href="#">
		                        <img src="../images/${value.url}">
		                        <b>
		                           	 ${value.introduce}
		                        </b>
		                        <span>
		                            ${value.price}
		                        </span>
		                        <span>
		                            ${value.oldPrice}
		                        </span>    
		                    </a>
		                </li>`
			})
			
			$(".ranking ul").html(str);
			$(".guess ul").html(str);
			$(".weekSale ul").html(str);
		})
		
		
		//跳转到购物车页面
//		$(".shopcart a").click(function(){
//			location.href = "shopcart.html";
//		})
		
		var flag1 = false;
		var flag2 = false;
		var flag3 = false;
		var flag4 = false;
		$(".brand span").click(function(event){
			if(flag1){
				$(this).css('background','url(../images/more1.jpg) no-repeat ')
				$(".brand ul").css('height','40')
				flag1 = false;
			}else{
				$(this).css('background','url(../images/nomore1.jpg) no-repeat ')
				$(".brand ul").css('height','auto')
				flag1 = true;
			}
		})
		$(".effect span").click(function(event){
			if(flag2){
				$(this).css('background','url(../images/more1.jpg) no-repeat ')
				$(".effect ul").css('height','40')
				flag2 = false;
			}else{
				$(this).css('background','url(../images/nomore1.jpg) no-repeat ')
				$(".effect ul").css('height','auto')
				flag2 = true;
			}
		})
		$(".price span").click(function(event){
			if(flag3){
				$(this).css('background','url(../images/more1.jpg) no-repeat ')
				$(".price ul").css('height','40')
				flag3 = false;
			}else{
				$(this).css('background','url(../images/nomore1.jpg) no-repeat ')
				$(".price ul").css('height','auto')
				flag3 = true;
			}
		})
		$(".origin span").click(function(event){
			if(flag4){
				$(this).css('background','url(../images/more1.jpg) no-repeat ')
				$(".origin ul").css('height','40')
				flag4 = false;
			}else{
				$(this).css('background','url(../images/nomore1.jpg) no-repeat ')
				$(".origin ul").css('height','auto')
				flag4 = true;
			}
		})
		$(".more").click(function(){
			$(".origin").toggle();
			if(flag3){
				$(this).css('background','url(../images/more2.jpg) no-repeat center')
			}else{
				$(this).css('background','url(../images/nomore2.jpg) no-repeat center')
			}
		})
		
		//普通ajax加载列表信息
//		$.getJSON("../json/list.json",function(data){
//			var str = "";
//			$.each(data,function(index,value){
//				str+=`<li>
//		                        <a href="#">		                      
//		                            <img src="../images/${value.url}" alt="">
//		                            <span class="span1">${value.introduce}</span>
//		                            <span>¥${value.price}</span>
//		                            <span>¥${value.oldPrice}</span>
//		                            <span>最近${value.trading}人成交</span>
//		                        </a>
//		                        <button type="button"></button>
//		                        <div>
//		                            <ul>
//		                                <li></li>
//		                                <li></li>
//		                                <li></li>
//		                                <li></li>
//		                            </ul>
//		                            <p>
//		                                <b>
//		                                好评率
//		                                <i>100%</i>
//		                                </b>
//		                                <b>□</b>
//		                            </p>
//		                            <p>0篇评价</p>
//		                        </div>
//		                    </li>`
//			})
//			
//			$(".list-show ul").html(str);
			
				
	})
	
})
	function showData(index,arr){
		var str = "";
        for( var i = (index-1)*24 ; i < index*24 ; i++ ){
        	if( i < arr.length ){
        		str+=`<li>
		                        <a target='_blank' href="details.html?${i} ">		                      
		                            <img src="${arr[i].url}" alt="">
		                            <span class="span1">${arr[i].introduce}</span>
		                            <span>¥${arr[i].price}</span>
		                            <span>¥${arr[i].oldPrice}</span>
		                            <span>最近${arr[i].trading}人成交</span>
		                        </a>
		                        <button type="button"></button>
		                        <span style="display:none" data-url=${arr[i].url} data-introduce=${arr[i].introduce} data-price=${arr[i].price}></span>
		                        <div>
		                            <ul>
		                                <li></li>
		                                <li></li>
		                                <li></li>
		                                <li></li>
		                            </ul>
		                            <p>
		                                <b>
		                                好评率
		                                <i>100%</i>
		                                </b>
		                                <b>□</b>
		                            </p>
		                            <p>0篇评价</p>
		                        </div>
		                    </li>`
        	}
        }

        $(".list-show ul").html( str );
        $(".list-show ul li").mouseenter(function(){
				var index = $(this).index();
				if((index + 1) % 4 == 0 || (index + 2) % 4 == 0){
					$(this).children('div').css({
						'display':'block',
						'left':'-250px'
					})
				}
				$(this).children('div').show();
			})
			$(".list-show ul li").mouseleave(function(){
				$(this).children('div').hide();
			})
			$(".span1").hover(function(){
							 	$(this).css({'color':'pink'});
							 },function(){
							 	$(this).css({'color':'#666'});
							 })
			
			
			//事件委托购物车按钮 将当前商品的cookie信息记录
				$(".list-show>ul>li").on("click","button",function(){
					console.log($(this).index());
				var arr = [];
				var flag = true;//值为真是说明arr中没有该商品购买信息  直接push进入arr中
				var datajson = {
					url : $(this).next().data("url"),
					introduce : $(this).next().data("introduce"),
					price : $(this).next().data("price"),
					count:1
				}
//				console.log( datajson )
				//再次点击时，商品信息会覆盖 可以先将cookie中的数据取出来 存入arr中 
				var oldCookie = getCookie("prolist");
				
				//如果cookie中没有数据 直接push
				if(oldCookie.length != 0 ){
					arr = oldCookie;
				//再次点击商品时  判断这个商品在原cookie中是否存在  如果存在就将数量++
					for( var i = 0 ; i < arr.length ; i++ ){
						if( datajson.url == arr[i].url && datajson.introduce == arr[i].introduce){
							arr[i].count++;
							flag = false;
							break;
						}
					}
				}
				if( flag ){
					arr.push( datajson );
				}
				//将数组信息存入到cookie中
				setCookie("prolist",JSON.stringify(arr),10);
				console.log(JSON.stringify(arr));
											
		})
	}
